<template>
    <div style="background-color: white;">
      <van-row style="background-color: white;">
        <van-col span="2" >
          <div  style=" width:100%; height:50px;justify-content: flex-end;  display: flex; align-items: center;">
            <van-icon   @click="onCancel" size="22" name="arrow-left" />
          </div>
        </van-col>
<!--        <van-col span="22">-->
          <van-search shape="round"   show-action   v-model="value" :placeholder="placeholder">
            <template #action>
              <div @click="onSearch">搜索</div>
            </template>
          </van-search>
        <van-col span="24">
          <van-cell :border="false" centen>
                <template #title>
                    <span>历史搜索</span>
                </template>
            <template #right-icon>
              <van-icon name="delete-o" style="padding-top: 5px" size="16" />
            </template>
            <template #label>
              <van-tag type="warning"  v-for="i in 10" style="margin-left: 10px">汉堡</van-tag>
            </template>
          </van-cell>
        </van-col>

      </van-row>
    </div>
</template>

<script>
export default {
  name: "Search",
  data(){
    return{
      value:'',
      placeholder:'请输入美食',
    }
  },
  methods: {
    onCancel(){
        this.$router.replace("/");
    },
    onSearch(){
        this.$router.replace("/ProductList");
    }
  },
  computed:{

  },

}
</script>

<style scoped>

</style>
